<!--
 * @Author: luoyun
 * @Descripttion: 
-->
<template>
  <div>
    <div class="imgWrap">
      <img :src="imgUrl" alt="" @load="imgLoad" @click="itemClick">
    </div>
    <div class="item-info">
      <p class="title"> {{goodItem.title}}</p>
      <p>
        <span class="price">{{goodItem.price}}</span>
        <span class="collect">
          {{goodItem.cfav}}
          </span>
      </p>
    </div>
  
  </div>
</template>

<script>
  export default {
    name:'GoodListItem',
    props:{
      goodItem:{
        type:Object,
        default(){
          return {}
        }
      }
    },
    data () {
      return {

      };
    },
    computed:{
      imgUrl(){
        return this.goodItem.image || this.goodItem.show.img
      }
    },
    components:{},

    methods:{
      imgLoad(){
        this.$bus.$emit("itemImgLoad") 
      },
      itemClick(){
        console.log('itemClick')
        this.$router.push(`/Detail/${this.goodItem.iid}`)
      }
    },

    created(){}
  }
</script>

<style lang='scss' scoped>
  .title{
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space:nowrap;
  }
  .price{
    color:var( --color-tint);
  }
  .collect{
    padding-left:20px;
    background: url('~assets/img/common/collect.svg') no-repeat 10px center ;
    background-size: 14px 14px;
  }
</style>